@model WalkingTec.Mvvm.Core.BaseVM
<style>

    a {
        color: #01aaed
    }
</style>
<wt:fieldset field-set-style="Simple" title="React, VUE to write projects unber front and back end separation mode">
    <wt:quote>
        <p>Using the WTM framework, you can also write microservice pattern projects, which is much easier than the traditional way</p>
    </wt:quote>
    <wt:quote>
        <p>ou can directly generate the front end and back end separated projects online. <a href="/setup" target="_blank">Click here</a>  to directly generate the zip package containing the solution for you. Download, decompress and open vs</p>
    </wt:quote>

    <ul class="doc">
        <li>
            Similar to the non separated projects, only when running setup, select react mode (VUE will be supported later)<br />
        </li>
        <li>
            After generating the project, press F5 to run it. The first time you run it, you will download many dependent packages of JavaScript. Please wait patiently for a long time. The running result is as shown in the figure below<br /><br />
            <img src="~/imgs/react3.png" /><br /><br />
        </li>
        <li>
            Through the menu in the upper right corner, we can start the code generator to generate code according to the model and access the swagger document of the interface.<br />
            For how to use the code generator,please refer to the <a href="/#/QuickStart/FirstModule">first module</a><br />
            The steps of generating code are the same, except that in the mode of front-end and back-end separation, the back-end API and front-end react pages will be generated.
        </li>
        <li>
            The front-end code will be in the ClientApp directory. When we debug in VisualStudio, it will automatically start the front-end and back-end, which is very convenient.<br />
            ClientApp directory is a complete React project. Pure front-end engineer can directly open ClientAppdirectory with compiler such as Code, which is no different from other React projects.<br />
        </li>
        <li>
            The front-end code generated by the framework will be under ClientApp/pages can be freely modified after generation<br />
            In react mode, there are some global settings in ClientApp/global.config.tsx  can be modified, such as if it is a development mode, the default number of lines in the list, if it uses a center pop-up window or a right drawer window, if it uses a tab page, the number of controls in each line of the form, etc.<br /><br />
            In VUE mode, some global variables can also be configured in ClientApp/src/config/index.ts file, such as if it is a development mode or not.
        </li>
        <li>
            In the case of front-end and back-end separation, the front-end and back-end have separate options to control whether they are development models.<br />
            In development mode, the front-end will read the locally defined menus and will not verify page and button permissions.<br />
            The front-end will only read the menus and permissions configured in the system database in the non development mode.<br />
            The front-end and back-end should be set to development mode or non development mode at the same time. For example, if the front end is development mode and the back end is non development mode, there will be buttons on the page, but when the API is actually called, an error without permission will be reported.
        </li>
    </ul>
</wt:fieldset>
<script>
  $("#@Model.ViewDivId").parent().css("height", "auto");
</script>
